<template>
  <div class="qrcode-poster" ref="poster">
    <div class="poster-top">
      <img :src="formAppearanceInfo.headerImg" alt="" v-if="formAppearanceInfo.backgroundType === 'img'">
      <div class="poster-back" v-else :style="{'background': formAppearanceInfo.backgroundColor}"></div>
    </div>
    <div class="poster-avatar">
      <img :src="getAvatarUrl(userInfo.avatar)" alt="" v-if="userInfo.avatar">
    </div>
    <div class="poster-form">
      <div class="form-creator">
        {{ userInfo. name}}
      </div>
      <div class="form-des">
        邀请你填写
      </div>
      <div class="form-label">
        {{ formInfo.label }}
      </div>
      <div class="form-qrcode">
        <div>
          <img :src="qrCodeUrl" alt="">
          <span>长按扫码进行填写</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, computed, defineExpose, reactive, watch } from 'vue'
import { useStore } from 'vuex'
import html2canvas from 'html2canvas'
import QRCode from 'qrcode'

const props = defineProps({
  formLink: {
    type: String
  }
})
const store = useStore()
const formInfo = computed(() => store.getters.formDesignInfo)
const formAppearanceInfo = computed(() => store.getters.formDesignInfo.formAppearanceInfo)
const userInfo = JSON.parse(localStorage.getItem('ruifox_user_info'))
//生成二维码
const options = reactive({
  margin: 0
})
const qrCodeUrl = ref('')
const generateQRCode = async () => {
  try {
    qrCodeUrl.value = await QRCode.toDataURL(props.formLink,options)
  } catch (error) {
    console.error('生成二维码失败', error);
  }
}
watch(() => props.formLink,() => {
  generateQRCode()
},{deep:true})
//下载二维码海报
const poster = ref(null)
const downloadQrcodePoster = () => {
  const options = {
    scale: 2, // 将画布分辨率提高一倍
  }
  html2canvas(poster.value, options).then(canvas => {
    const imageData = canvas.toDataURL("image/png");
    const downloadLink = document.createElement('a');
    downloadLink.href = imageData;
    downloadLink.download = '二维码海报.png';
    downloadLink.click();
  })
}
//获取头像
const getAvatarUrl = (url) => {
  if(url.startsWith('avatar_img')){
    return require('@/assets/'+url)
  }else{
    return url
  }
}
defineExpose({
  downloadQrcodePoster
})
</script>

<style lang="scss" scoped>
.qrcode-poster{
    position: relative;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    .poster-top{
        width: 300px;
        height: 90px;
        background: skyblue;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .poster-back{
            width: 100%;
            height: 100%;
        }
    }
    .poster-avatar{
        position: absolute;
        top: 70px;
        left: 130px;
        width: 40px;
        height: 40px;
        overflow: hidden;
        border-radius: 50%;
        border: 1px solid #fff;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .poster-form{
        padding: 30px 0 20px 0;
        text-align: center;
        .form-creator{
            margin-bottom: 20px;
            color: #444444;
        }
        .form-des{
            margin-bottom: 20px;
            color: #AAAAAA;
        }
        .form-label{
            margin-bottom: 60px;
            color: #444444;
        }
        .form-qrcode{
            display: flex;
            justify-content: center;
            div{
                display: flex;
                align-items: center;
                img{
                    margin-right: 10px;
                    width: 70px;
                    height: 70px;
                }
                span{
                    display: inline-block;
                    width: 56px;
                    font-size: 14px;
                }
            }
        }
    }
}
</style>